<template>
  <div>
    <div>
      <el-input placeholder="请输入员工名进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                clearable
                @clear="initAdjustSals"
                style="width: 350px;margin-right: 10px" v-model="keyword"
                @keydown.enter.native="initAdjustSals"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="initAdjustSals">
        搜索
      </el-button>
      <el-button icon="el-icon-search" type="primary" @click="showAddAdjustSalDialogVisible = true">
        添加
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="adjustSals"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="调薪人员"
            width="180">
        </el-table-column>
        <el-table-column
            prop="asDate"
            label="调薪日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="beforeSalary"
            label="调前薪资">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="调薪原因">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="showEditAdjustSalView(scope.row)" style="padding: 3px" size="small">编辑</el-button>
            <el-button @click="deleteAdjustSal(scope.row)" style="padding: 3px" size="small" type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          title="调薪记录"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="editAdjustSal" :rules="rules" ref="editAdjustSalRef">
          <el-form-item label="调薪原因:" prop="trainContent">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="editAdjustSal.reason"
                      placeholder="请输入培训内容"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="调薪日期:" prop="asDate">
            <el-date-picker
                v-model="editAdjustSal.asDate"
                type="date"
                placeholder="请输入调薪日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="editAdjustSal.beforeSalary"
                      placeholder="请输入调前薪水"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="editAdjustSal.afterSalary"
                      placeholder="请输入调后薪水"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="editAdjustSal.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
          title="调薪记录"
          :visible.sync="showAddAdjustSalDialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="adjustSal" :rules="rules" ref="addAdjustSalRef">
          <el-form-item label="调薪原因:" prop="trainContent">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="adjustSal.reason"
                      placeholder="请输入培训内容"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="调薪日期:" prop="asDate">
            <el-date-picker
                v-model="adjustSal.asDate"
                type="date"
                placeholder="请输入调薪日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="调前薪水" prop="beforeSalary">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit"
                      v-model.number="adjustSal.beforeSalary"
                      placeholder="请输入调前薪水"></el-input>
          </el-form-item>
          <el-form-item label="调后薪水" prop="afterSalary">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model.number="adjustSal.afterSalary"
                      placeholder="请输入调后薪水"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="adjustSal.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="调薪人员:" prop="eid">
            <el-select v-model="adjustSal.eid" placeholder="人员" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in emps"
                  :key="item.id"
                  :label="item.workID+'-'+item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="showAddAdjustSalDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerSalary",
  data() {
    return {
      keyword: "",
      showAddAdjustSalDialogVisible: false,
      adjustSals: [],
      total: 0,
      page: 1,
      size: 10,
      dialogVisible: false,
      editAdjustSal: {
        eid: "",
        asDate: "",
        beforeSalary: 0,
        afterSalary: 0,
        reason: "",
        remark: ""
      },
      adjustSal: {
        eid: "",
        asDate: "",
        beforeSalary: 0,
        afterSalary: 0,
        reason: "",
        remark: ""
      },
      rules: {
        eid: [{required: true, message: '调薪员工不能为空', trigger: 'blur'}],
        asDate: [{required: true, message: '日期不能为空', trigger: 'blur'}],
        beforeSalary: [
          {required: true, message: '薪水不能为空', trigger: 'blur'},
          {type: 'number', message: '薪水必须为数字值', trigger: 'blur'}
        ],
        afterSalary: [
          {required: true, message: '薪水不能为空', trigger: 'blur'},
          {type: 'number', message: '薪水必须为数字值', trigger: 'blur'}
        ],
        reason: [{min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}],
        remark: [{min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}]
      },
      emps: []
    }
  },
  mounted() {
    this.initAdjustSals();
    this.getRequest("/personnel/salary/emps").then((resp) => {
      if (resp) {
        this.emps = resp;
      }
    })
  },
  methods: {
    initAdjustSals() {
      let url = '/personnel/salary/?page=' + this.page + '&size=' + this.size + '&keyword=' + this.keyword;
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.adjustSals = resp.data;
          this.total = resp.total;
        }
      })
    },
    currentChange(currentPage) {
      this.page = currentPage;
      this.initEmpEc();
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initEmpEc();
    },
    showEditAdjustSalView(adjustSal) {
      this.dialogVisible = true;
      Object.assign(this.editAdjustSal, adjustSal);
    },
    deleteAdjustSal(data) {
      this.$confirm('此操作将永久删除【' + data.name + '的员工奖惩记录' + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/personnel/salary/" + data.id).then(resp => {
          if (resp) {
            this.initAdjustSals();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.showAddAdjustSalDialogVisible = false;
      this.adjustSal = {
        eid: "",
        asDate: "",
        beforeSalary: 0,
        afterSalary: 0,
        reason: "",
        remark: ""
      };
      this.resetForm();
    },
    editForm() {
      this.$refs['editAdjustSalRef'].validate(valid => {
        if (valid) {
          this.putRequest("/personnel/salary/", this.editAdjustSal).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.initAdjustSals();
            }
          })
        }
      });
    },
    addForm() {
      this.$refs['addAdjustSalRef'].validate(valid => {
        if (valid) {
          console.log(this.adjustSal);
          if (this.adjustSal.beforeSalary >= this.adjustSal.afterSalary) {
            this.$message({
              message: '调后薪水必须大于调前薪水',
              type: 'warning'
            });
            return;
          }
          this.postRequest("/personnel/salary/", this.adjustSal).then(resp => {
            if (resp) {
              this.showAddAdjustSalDialogVisible = false;
              this.initAdjustSals();
            }
          })
        }
      });
    },
    resetForm() {
      this.$refs['addAdjustSalRef'].resetFields();
      this.$refs['editAdjustSalRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>